<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
	<title>transition</title>

  <style>
  	#an1, #an2, #an3, #an4, #an5, #an6 {
  		padding: 10px;
  		margin: 20px;
  		width: 100px;
  		border: 2px solid #aaaaaa;
  		border-radius : 10px;
  		box-shadow: 3px 3px 13px gray;
  		text-align: center;
  		-webkit-transition: background 2s, -webkit-transform 1s;
  	}
  	
  	#an1:hover, #an2:hover, #an3:hover, #an4:hover, #an5:hover, #an6:hover {
  		background-color: yellow;
  		color: orange;
  		font-weight: bold;
  		-webkit-transform: rotate(10deg);
  		-webkit-transition: background 2s, -webkit-transform 1s; // 마우스 오버를 했을 경우 배경 색깔이 서서히 바뀌게 하는 방법
  		
  	}
  	#tran_main{
  		width: 100%;
  		position: relative;
  	}
  	#ca, #ca1, #ca2 {
  		padding: 20px;
  		height: 100px;
  		width: 100px;
  		margin: 20px;
  		border: 2px solid #aaaaaa;
  		border-radius : 10px;
  		box-shadow: 3px 3px 13px gray;
  		text-align: center;
  		-webkit-transition: background 3s, -webkit-transform 3s;
  		position: absolute;
  		display: inline-block;
  		
  	}
  	#ca1 {
  		left:150px;
  	}
  	#ca2 {
  		left:300px;
  	}
  	#ca:hover, #ca1:hover, #ca2:hover{
  		background-color: yellow;
  		color: orange;
  		font-weight: bold;
  		-webkit-transform: rotate(45deg);
  		-webkit-transition: background 2s, -webkit-transform 0.5s; // 마우스 오버를 했을 경우 배경 색깔이 서서히 바뀌게 하는 방법
  		
  	}
  	
  </style>
</head>

<body>
  <!-- <div id="an1">Animation 1</div>
  <div id="an2">Animation 2</div>
  <div id="an3">Animation 3</div>
  <div id="an4">Animation 4</div>
  <div id="an5">Animation 5</div>
  <div id="an6">Animation 6</div> -->
  <div id="tran_main">
  <div id="ca"></div>
  <div id="ca1"></div>
  <div id="ca2"></div>
  </div>
</body>
</html>
